<%@ include file="common.jspf" %>
<%@ include file="header.jspf" %>
  
<div class="container">

	<div class="page-header">  		
  		<h3>Link <small>list</small></h3>
	</div>

    <form class="form-inline" role="form">
    	<input id="inputPageNo" type="hidden" name="pageNo" value="${param.pageNo}"/>
		<div style="display: inline-block; vertical-align: middle;">
			<div class="input-group" style="width: 250px;">
				<label class="sr-only" for="query">Query</label>
			    <input id="inputQuery" type="search" name="query" class="form-control" placeholder="Content" value="${param.query}"/>
			    <span class="input-group-btn">
		       		<button id="btnSearch" type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span>&nbsp;</button>
		     	</span>
	     	</div>
     	</div>
     	<div class="pull-right">
			<button id="btnCreate" type="button" class="btn btn-default">
				<span class="glyphicon glyphicon-pencil"></span> Create
			</button>
		</div>
	</form>
	
	<table class="table table-striped table-hover">
		<thead>
			<tr>
				<th><spring:message code="label.category" text="Category"/></th>
				<th><spring:message code="label.name" text="Name"/></th>
				<th><spring:message code="label.url" text="URL"/></th>
				<th><spring:message code="label.hit" text="Hit"/></th>
			</tr>
		</thead>
		<tbody id="tbodySearch">
		</tbody>
	</table>	
	
	<ul id="ulPagination" class="pagination">
	</ul>
		    
</div><!-- container -->

<script>
	$(function() {
		initEvents();
	});
	
	function initEvents() {
		$('#btnSearch').click(function() {
			search($('#inputQuery').val(), $('#inputPageNo').val());
		});
		$('#btnCreate').click(create);
	}
	
	function search(query, pageNo) {
		$('#inputQuery').val(query);
		$('#inputPageNo').val(pageNo);
		
		var url = '${urlSearch}';
		var data = {query: query, pageNo: pageNo};
		var success = function(data) {
			$('#tbodySearch').html("");
			$.each(data.list, function(index, value) {
				var $tr = $('<tr/>');
				$('<td/>').text(value.kind).appendTo($tr);
				$('<td/>').text(value.title).appendTo($tr);
				$('<td/>').text(value.url).appendTo($tr);
				$('<td/>').text(value.hit).appendTo($tr);
				$('#tbodySearch').append($tr);
			});
			
			var $ul = $('#ulPagination');
			$ul.html("");
			var pager = data.pager;
			if (pager.prevPage) {
				$ul.append('<li><a href="#">&laquo;</a></li>');
			}
			for (var i = pager.startPage; i <= pager.endPage; i++) {
				var $li = $('<li/>');
				var $a = $('<a/>');
				$a.text(i);
				$a.click(function() {
					search($('#inputQuery').val(), $(this).text());
				});
				$a.appendTo($li);
				$li.appendTo($ul);
			}
			if (pager.nextPage) {
				$ul.append('<li><a href="#">&&raquo;</a></li>');
			}
		};
		$.getJSON(url, data, success);
	}
</script>

<%@ include file="footer.jspf" %>